<template>
  <div id="centerRight2">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-line" class="text-icon"></icon>
        </span>
        <div class="d-flex">
          <span class="mx-2">成锭率/成锭率数据集分布</span>
        </div>
      </div>
      <dv-charts :option="option" />
      </div>
  </div>

</template>

<script>
export default {
  name: 'RoseChart',
  data () {
    return {
      option: {}
    }
  },
  methods: {
    createData () {
      this.option = {
        series: [
          {
            type: 'pie',
            radius: '50%',
            roseSort: true,
            data: [

              { name: '0.70', value: 0 },
              { name: '0.75', value: 8 },
              { name: '0.80', value: 1 },
              { name: '0.85', value: 30 },
              { name: '0.90', value: 81 },
              { name: '0.95', value: 75 },
            ],
            insideLabel: {
              show: false
            },
            outsideLabel: {
              formatter: '{name}占比{percent}%',
              labelLineEndLength: 10,
              style: {
                fill: '#fff'
              },
              labelLineStyle: {
                stroke: '#fff'
              }
            },
            roseType: true
          }
        ],
        color: [ '#da2f00', '#fa3600', '#ff4411', '#ff724c', '#541200', '#801b00', '#a02200', '#5d1400', '#b72700']
      }
    },
  },
  mounted () {
    const { createData } = this
    createData()
    setInterval(createData, 30000)

    let i=0
    setInterval(() => {

      if(i==1){
        // this.options.title.text='成锭率测试数据集分布'
        this.option.series[0].data=[

          { name: '0.70', value: 0 },
          { name: '0.75', value: 8 },
          { name: '0.80', value: 1 },
          { name: '0.85', value: 30 },
          { name: '0.90', value: 81 },
          { name: '0.95', value: 75 },
        ];
        this.option = { ...this.option };
        i=0;
      }else {
        // this.options.title.text='成材率测试数据集分布'
        this.option.series[0].data=[

          { name: '0.70', value: 1 },
          { name: '0.75', value: 18 },
          { name: '0.80', value: 15 },
          { name: '0.85', value: 105 },
          { name: '0.90', value: 53 },
          { name: '0.95', value: 8 },
        ];
        this.option = { ...this.option };
        i++;
      }

      // this.year++;
      // this.options.title.text = `${this.year}年各行业市场占有金额`
      // this.options.series[0].data.forEach((item, i) => {
      //   this.options.series[0].data[i] = item + Math.floor(Math.random() * 100) - 50
      // })

    }, 1500)
  }

}
</script>

<style lang="scss" scoped>
//#rose-chart {
//  padding: 1px;
//  height: 400px;
//  width: 330px;
//  border-radius: 5px;
//  .rose-chart-title {
//    height: 50px;
//    font-weight: bold;
//    text-indent: -10px;
//    font-size: 15px;
//    display: flex;
//    align-items: center;
//  }
//  .dv-charts-container {
//    height: calc(~"100% - 20px");
//  }
//}
#centerRight2 {
  $box-height: 410px;
  $box-width: 340px;
  padding: 5px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    padding: 5px;
    height: $box-height;
    width: $box-width;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .body-box {
    border-radius: 10px;
    overflow: hidden;
    .dv-cap-chart {
      width: 100%;
      height: 160px;
    }
  }
}

</style>
